<template>
  <div>
    <a-card title="系统日志" style="width: 100%">
      <a-button slot="extra" type="primary" @click="downLoad">下载日志</a-button>
      <a-row>
        <a-col :span="10">
          日期:
          <a-space>
            <a-select v-model="monthFormat"
                      style="width: 120px" @change="handleProvinceChange">
              <a-select-option v-for="month in monthData" :key="month">
                {{ month }}
              </a-select-option>
            </a-select>
            <a-select :default-value="secondMonth[0]" style="width: 120px" @change="dateTimeChange">
              <a-select-option v-for="c in secondMonth" :key="c">
                {{ c }}
              </a-select-option>
            </a-select>
          </a-space>
        </a-col>
        <a-col :span="10">
          日志等级:
          <a-select style="width: 200px" v-model="params.type">
            <a-select-option v-for="level in logSysInfo.levels || []" :value="level.code">
              {{ level.type }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="4">
          <a-button type="danger" @click="visible = true">清理日志</a-button>
        </a-col>
      </a-row>
      <a-modal
          title="清理日志"
          :visible="visible"
          okText="确认"
          okType="danger"
          cancelText="放弃"
          @ok="handleOk"
          @cancel="handleCancel"
      >
        <a-select style="width: 200px" v-model="cleanTime">
          <a-select-option :value="1">
            前一个月
          </a-select-option>
          <a-select-option :value="3">
            前三个月
          </a-select-option>
          <a-select-option :value="6">
            前六个月
          </a-select-option>
        </a-select>
      </a-modal>
      <div class="content-log" v-if="sysLineContent.length > 0" v-html="sysLineContent"></div>
      <div class="content-log" v-else> 暂无日志</div>
    </a-card>
  </div>
</template>

<script>
import {downloadLog, getSysInitParam, sysLogs, clearSysLog, clearOperaLog} from "@/api/logs";

export default {
  name: "sysLogs",
  data() {
    return {
      monthData:[],
      dayData:{},
      secondMonth: [],
      sysLineContent: [],
      logSysInfo: {},
      cleanTime:1,
      visible: false,
      monthFormat:this.$moment(new Date()).format('yyyy-MM'),
      params: {
        type: 1,
        date: this.$moment(new Date()).format('yyyy-MM-DD')
      },
      queryParam: {
        date: '',
        type: undefined
      }
    }
  },
  watch: {
    params: {
      immediate: true,
      deep: true,
      handler: function (newValue) {
        this.loadLogInfo(this.params);
      }
    }
  },
  mounted() {
    // 获取系统参数
    this.loadLogPrefix();
  },
  methods: {
    handleProvinceChange(value) {
      this.secondMonth = this.dayData[value];
    },
    dateTimeChange(val){
      this.params.date = this.$moment(val).format('yyyy-MM-DD')
    },
    // 确认清理
    handleOk(e) {
      const _this = this;
      this.$confirm({
        title: '清理系统日志',
        content: '此操作无法恢复,请谨慎操作?',
        okText: '确认',
        okType: 'danger',
        cancelText: '放弃',
        onOk() {
          clearSysLog(_this.cleanTime).then(res => {
            const {code,msg} = res;
            if (code === 200){
              _this.$message.success(msg);
              _this.visible = false;
            } else {
              _this.$message.error(msg);
            }
          }).catch(err => {
            console.log(err);
          })
        },
        onCancel() {
          console.log("取消了删除");
        },
      });
    },
    // 点击了取消
    handleCancel(e) {
      this.visible = false;
      this.cleanTime = 1;
    },
    // 加载日志选项
    async loadLogPrefix() {
      const {code, data, msg} = await getSysInitParam();
      if (code === 200) {
        console.log(data);
        this.logSysInfo = data;
        this.monthData = data.dateInfos.months;
        this.dayData = data.dateInfos.days;
        this.secondMonth = data.dateInfos.days[this.$moment(new Date()).format("yyyy-MM")];
      } else {
        this.$message.error(msg);
      }
    },

    // 加载日志
    async loadLogInfo(params) {
      const {code, data, msg} = await sysLogs(params);
      if (code === 200) {
        this.sysLineContent = data;
      } else {
        this.$message.error(msg);
      }
    },

    // 下载日志
    async downLoad() {
      const res = await downloadLog(this.params);
      let blob = new Blob([res], {
        type: 'application/text'
      })
      let fileName = this.$moment(new Date()).format('yyyyMMDDHHmmss') + '.log'
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName)
      } else {
        var link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = fileName
        link.click()
        //释放内存
        window.URL.revokeObjectURL(link.href)
      }
    }
  },
}
</script>

<style scoped>
.content-log {
  line-height: 20px;
  margin-top: 20px;
  font-size: 12px;
}
</style>
